<template>
  <div id="templateDiv">
    <Splitpanes horizontal>
      <Pane :size="100">
        <!-- <el-table ref="resultTemplateTable" v-loading="loading" :height="'calc(100% - 15px)'" row-key="id" :data="resultTemplateList" highlight-current-row @row-dblclick="resultTemplateRowDblclick">
          <el-table-column prop="templateName" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column label="编号" prop="templateCode" show-overflow-tooltip></el-table-column>
          <el-table-column label="是否自动应用" prop="isAutoApply" show-overflow-tooltip>
            <template #default="{row}">
              <el-switch v-model="row.isAutoApply" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="resultChange(row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template #default="{ row }">
              <el-button type="primary" plain @click="resultTemplateRowDblclick(row)">应用</el-button>
            </template>
          </el-table-column>
        </el-table> -->
        <div style="height: calc(100% - 30px)">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="form.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup="keyupEnter" @clear="findTemplate" @search-click="findTemplate()"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" @click="findTemplate"></vxe-button>
            </template>
          </vxe-toolbar>

          <vxe-table ref="resultTemplateTable" v-loading="loading" height="auto" :data="resultTemplateList" highlight-current-row @cell-dblclick="resultTemplateRowDblclick">
            <vxe-table-column title="名称" field="templateName" show-overflow-tooltip min-width="120"></vxe-table-column>
            <vxe-table-column title="编号" field="templateCode" show-overflow-tooltip width="50"></vxe-table-column>
            <vxe-table-column title="序号" field="seq" show-overflow-tooltip width="50"></vxe-table-column>
            <vxe-table-column title="是否自动应用" field="isAutoApply" align="center" show-overflow-tooltip width="80">
              <template #default="{ row }">
                <el-switch v-model="row.isAutoApply" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="resultChange(row)"></el-switch>
              </template>
            </vxe-table-column>
            <vxe-table-column fixed="right" title="操作" align="center" width="60">
              <template #default="{ row }">
                <vxe-button type="text" class-name="button button-blue" class="button button-blue" @click="resultTemplateRowDblclick({ row: row })">应用</vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </Pane>
      <!-- <Pane :size="50">
        <el-table ref="itemDetailTable" v-loading="itemLoading" row-key="id" :data="itemDetailList">
          <el-table-column label="项目" align="left" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.itemNa ? row.itemNa : "" }}
            </template>
          </el-table-column>
          <el-table-column prop="rptResult" label="结果"></el-table-column>
        </el-table>
      </Pane>-->
    </Splitpanes>
  </div>
</template>
<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, inject } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { IsEmpty } from '@/utils/common';
import { VXETable, VxeFormPropTypes, VxeFormInstance, List } from 'vxe-table';
import { Splitpanes, Pane } from 'splitpanes';

//暴露属性和方法
defineExpose({
  initRptGroup
});

// 全局变量定义区 ==========
// 获取屏幕高度
let conHeight = ref(document.documentElement.clientHeight);
let useSize = localStorage.getItem('uiSize');
let loading = ref(false); //模版加载
// let itemLoading = ref(false); //项目加载

let { proxy }: any = getCurrentInstance();
let resultTemplateList: any = reactive([]); //模版表格数据
// let itemDetailList: any = reactive([]); //项目表格数据

// 当前选中标本
let rptMaininfo: any = reactive({
  id: '',
  sampleda: '',
  sampleNo: '',
  rptGroup: ''
});

let form = reactive({
  searchValue: ''
});

// 方法定义区 =============
// 页面加载时更新列表(左侧)
onMounted(() => {
  findTemplate();
});

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findTemplate();
  }
}

// 接收父组件传值
function initRptGroup(repData: any) {
  rptMaininfo.id = repData.id;
  rptMaininfo.sampleda = repData.sampleda;
  rptMaininfo.sampleNo = repData.sampleNo;
  rptMaininfo.rptGroup = repData.rptGroup;
  findTemplate();
}

function findTemplate() {
  loading.value = true;
  resultTemplateList.length = 0;
  const url = '/lab/template/getTemplateByRptGroup';
  proxy.$http
    .get(url, { params: { rptGroup: rptMaininfo.rptGroup,searchValue: form.searchValue } })
    .then((res: any) => {
      resultTemplateList.length = 0;
      resultTemplateList.push(...res.data);
      if (resultTemplateList.length>0){
        userRowClick({
          row: resultTemplateList[0],
          rowIndex: 0
        });
      }
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('查询模版失败', VxeNotifyType.error);
    });
}
// 点击当前行// 行点击事件(需要调试)
function userRowClick({ row }: any) {
  (proxy.$refs.resultTemplateTable as any).setCurrentRow(row);
}

//双击事件
function resultTemplateRowDblclick({ row }) {
  (proxy.$refs.resultTemplateTable as any).setCurrentRow(row);
  proxy.$emit('getResultTemplate', row.id);
  // resultTemplateRowClick(row);

  // const data = { labRptresults: itemDetailList };
  // const url = '/lab/rptResult/batchAddResultItemList';
  // proxy.$http
  //   .post(url, data)
  //   .then((res: any) => {
  //     findQcInstrItemList(); // 获取检验仪器表格数据
  //     VxeMessage(res.status.msg, VxeNotifyType.success);
  //   })
  //   .catch((err: any) => {
  //     VxeMessage(err, VxeNotifyType.error);
  //   });
}

function resultChange(row) {
  const url = '/lab/template/editTemplate';
  const labTemplate = row;
  proxy.$http
    .post(url, labTemplate)
    .then((res: any) => {
      VxeMessage('修改成功', VxeNotifyType.success);
      setTimeout(() => {
        findTemplate();
      }, 500);
    })
    .catch((err: any) => {
      VxeMessage('修改失败', VxeNotifyType.success);
    });
}

//单击事件
// function resultTemplateRowClick(row) {
//   (proxy.$refs.resultTemplateTable as any).setCurrentRow(row);
//   itemLoading.value = true;
//   itemDetailList.length = 0; //放入数据前清空数据
//   const url = '/lab/template/detail/getItemByTemplate';
//   proxy.$http
//     //注意此处的数据条数
//     .get(url, {
//       params: { id: row.id }
//     })
//     .then((res: any) => {
//       itemDetailList.push(...res.data);
//       itemLoading.value = false;
//     })
//     .catch((err: any) => {
//       itemLoading.value = false;
//       VxeMessage('获取项目表格数据异常', VxeNotifyType.error);
//     });
// }
</script>
<style lang="scss" scoped>
#templateDiv {
  height: 100%;
}
</style>
